import React, {useRef,useState } from 'react';
// useRef无法直接引用函数式子组件
export const Children: React.FC = () => {
    const [count, setCount] = useState(0);
    const changeFun = (setp: number) => {
        setCount((old) => {
            return old = old + setp
        })
    }
    return (
        <>
            <div>
                <h2>子组件</h2>
                <p>数字：{count}</p>
                <button onClick={() => {
                    changeFun(1)
                }}>+1</button>
                <button onClick={() => {
                    changeFun(-1)
                }}>-1</button>
            </div>
        </>
    )
}

export const Father: React.FC = () => {
    const childRef = useRef();
    return (
        <>
            <h1>父亲元素</h1>
            {/* useRef 无法使用ref直接引用函数式子组件 */}
            {/* Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? */}
            <Children ref={childRef}></Children>
        </>
    )
}